<template>
  <div>
    <el-form
      :model="data.addForm"
      ref="addForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="信息分类：" prop="categoryID">
        <el-select
          v-model="data.addForm.categoryID"
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option
            v-for="item in data.categoryData"
            :key="item.id"
            :label="item.category_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="新闻标题：" prop="title">
        <el-input v-model="data.addForm.title" style="width: 440px;"></el-input>
      </el-form-item>
      <el-form-item label="缩略图：" prop="imageUrl">
        <imgUpload
          :imgUrl.sync="data.addForm.imgUrl"
          :config="data.uploadImgConfig"
        />
      </el-form-item>
      <el-form-item label="发布时间：">
        <el-form-item prop="createDate">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="data.addForm.createDate"
            style="width: 240px;"
            disabled
          ></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item label="详细内容：" class="rich_text_section">
        <quill-editor
          ref="myQuillEditor"
          v-model="data.addForm.content"
          :options="data.editorOptions"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm"
          :loading="data.subLoading"
        >保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dateFormat } from "@/utils/common";
import { reactive, onMounted, onActivated } from "@vue/composition-api";
import { GetInfoList, EditInfo } from "@/api/news";
import imgUpload from "@c/imgupload";

export default {
  name: "editdetails",
  components: { imgUpload },
  setup(props, { root }) {
    /**
     * data
     */
    const data = reactive({
      // 图片上传配置
      uploadImgConfig: {
        action: "http://up-z2.qiniup.com",
        accesskey: "7fBdKS3fKivjUm6x6_mW77uWscGsqHkkDiDv1qIF",
        secretkey: "ylFdsxr_qq5q5lL8gjTzaxZLN30l_NKtcrR_WCGn",
        buckety: "vue3admin"
      },
      categoryData: [],
      // 信息ID
      ID: root.$route.params.id || root.$store.getters["editinfodetails/infoID"],

      addForm: {
        categoryID: "",
        title: "",
        imgUrl: "",
        createDate: "",
        content: ""
      },
      editorOptions: {},
      uploadKey: {
        token: "",
        key: ""
      },
      subLoading: false
    });
    /**
     * methods
     */
      // 获取分类
    const getInfoCategory = () => {
        root.$store.dispatch("common/getInfoCategory", "").then(res => {
          data.categoryData = res;
        });
      };

    // 获取当前id信息详情
    const getInfo = () => {
      let requestData = {
        pageNumber: 1,
        pageSize: 10,
        id: data.ID
      };
      GetInfoList(requestData).then(res => {
        let resData = res.data.data.data[0];
        data.addForm = {
          categoryID: resData.categoryId,
          title: resData.title,
          createDate: dateFormat(resData.createDate),
          content: resData.content,
          imgUrl: resData.imgUrl
        };
      }).catch(error => {
        console.log(error);
      });
    };

    // 提交
    const submitForm = () => {
      if (!data.addForm.categoryID) {
        root.$message.warning("分类不能为空");
        return false;
      }
      if (!data.addForm.title) {
        root.$message.warning("标题不能为空");
        return false;
      }
      if (!data.addForm.content) {
        root.$message.warning("内容不能为空");
        return false;
      }
      data.subLoading = true;
      // 参数
      let requestData = {
        id: data.ID,
        categoryId: data.addForm.categoryID,
        title: data.addForm.title,
        content: data.addForm.content,
        imgUrl: data.addForm.imgUrl
      };
      EditInfo(requestData).then(res => {
        let resData = res.data;
        if (resData.resCode === 0) {
          root.$message.success(resData.message);
        }
        data.subLoading = false;
      }).catch(error => {
        data.subLoading = false;
      });
    };

    /**
     * 生命周期
     */
    onMounted(() => {
      getInfoCategory();
    });

    onActivated(() => {
      data.ID = root.$route.params.id || root.$store.getters["editinfodetails/infoID"];
      getInfo();
    });
    return {
      data,
      submitForm
    };
  }
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

// 修复样式错乱的问题
.rich_text_section {
  .el-form-item__content {
    line-height: normal;

    .ql-toolbar:after {
      display: none;
    }
  }
}
</style>
